<template>
  <div>
      <!--搜索组件-->
      <el-card id="search">
        <el-row>
          <el-col :span="20">
            <el-input v-model="searchModel.name" placeholder="请输入物料名称" clearable></el-input>
            <el-input v-model="searchModel.project" placeholder="请输入检验项目" clearable></el-input>
            <el-input v-model="searchModel.type" placeholder="请输入检验类型" clearable></el-input>
            <el-button
              @click="getMateriallist"
              type="primary"
              round icon="el-icon-search"
            >搜索</el-button>
            <el-button
              @click="reset"
              type="primary"
              round icon="el-icon-refresh"
            >重置</el-button>
          </el-col>
          <el-col :span="4" align="right">
            <el-button type="primary" clearable icon="el-icon-plus" @click="openEditUI(null)">新增</el-button>
          </el-col>
        </el-row>
      </el-card>
      <!--结果列表-->
      <el-card id="list">
        <el-table
          :data="materialList"
          stripe
          style="width: 100%"
        >
          <el-table-column
            prop="id"
            label="编号"
            align="center"
            width="50"
          >
          </el-table-column>
          <el-table-column
            prop="name"
            label="物料名称"
            align="center"
            width="150"
          >
          </el-table-column>
          <el-table-column
            prop="version"
            label="型号"
            align="center"
            width="120"
          >
          </el-table-column>
          <el-table-column
            prop="specification"
            label="规格"
            align="center"
            width="150"
          >
          </el-table-column>
          <el-table-column
            prop="units"
            label="单位"
            align="center"
            width="150"
          >
          </el-table-column>
          <el-table-column
            prop="project"
            label="检验项目"
            align="center"
            width="150"
          >
          </el-table-column>
          <el-table-column
            prop="type"
            label="检验类型"
            align="center"
            width="150"
          >
          </el-table-column>
          <el-table-column
            prop="upperLimit"
            label="标准值上限"
            align="center"
            width="80"
          >
          </el-table-column>
          <el-table-column
            prop="lowerLimit"
            label="标准值下限"
            align="center"
            width="80"
          >
          </el-table-column>
          <el-table-column
            label="操作"
            align="center"
            width="200"
          >
            <template slot-scope="scope">
              <el-button @click="openEditUI(scope.row.id)" type="primary" icon="el-icon-edit" circle></el-button>
              <el-button @click="delStandardById(scope.row)" type="danger" icon="el-icon-delete" circle></el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-card>
      <!--分页组件-->
      <div class="block">
        <span class="demonstration"></span>
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="searchModel.pageNum"
          :page-sizes="[5, 10, 15, 20]"
          :page-size="searchModel.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
        </el-pagination>
      </div>
      <!--  用户信息编辑对话框  -->
      <el-dialog @close="clearForm" :title="title" :visible.sync="dialogFormVisible">
        <el-form :model="materialForm" :rules="rules" ref="materialFromRef">
          <el-form-item label="编号" prop="id" :label-width="formLabelWidth">
            <el-input v-model="materialForm.id" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="物料名称" :label-width="formLabelWidth">
            <el-button type="primary" @click="dialogVisible = true">修改物料名称</el-button>
            <el-dialog
              title="提示"
              :visible.sync="dialogVisible"
              width="30%"
              :before-close="handleClose">
              <el-select v-model="materialForm.name" placeholder="请选择物料名称">
                <el-option
                  v-for="item in searchModel.options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
              <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
              </span>
            </el-dialog>
          </el-form-item>
          <el-form-item label="型号" prop="version" :label-width="formLabelWidth">
            <el-input v-model="materialForm.version" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="规格" prop="specification" :label-width="formLabelWidth">
            <el-input v-model="materialForm.specification" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="单位" prop="units" :label-width="formLabelWidth">
            <el-input v-model="materialForm.units" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="检验项目名称" prop="project" :label-width="formLabelWidth">
            <el-input v-model="materialForm.project" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="检验类型" prop="type" :label-width="formLabelWidth">
            <el-input v-model="materialForm.type" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="标准值上限" prop="upperLimit" :label-width="formLabelWidth">
            <el-input v-model="materialForm.upperLimit" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="标准值下限" prop="lowerLimit" :label-width="formLabelWidth">
            <el-input v-model="materialForm.lowerLimit" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="备注" prop="remark" :label-width="formLabelWidth">
            <el-input v-model="materialForm.remark" autocomplete="off"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="saveList">确 定</el-button>
        </div>
      </el-dialog>
  </div>
</template>

<script>
import materialApi from '@/api/material'

export default {
  data() {
    return {
      dialogVisible: false,
      formLabelWidth:'200px',//控制'用户名'到左边的宽度
      materialForm:{},
      dialogFormVisible:false,//控制对话框是否可见
      title:'',
      total:0,
      searchModel: {
        pageNum:1,
        pageSize: 10,
        options: [{
          value: '混凝土',
          label: '混凝土'
        }, {
          value: '红砖',
          label: '红砖'
        }, {
          value: '泡沫',
          label: '泡沫'
        },],
        value: '',
      },
      materialList: [],
      rules:{
        project: [
          { required: true, message: '检验项目名称不能为空', trigger: 'blur' },
          { min: 6, max: 50, message: '长度在 6 到 50 个字符', trigger: 'blur' }
        ],
        type: [
          { required: true, message: '检验类型不能为空', trigger: 'blur' },
          { min: 1, max: 10, message: '长度在 1 到 10 个字符', trigger: 'blur' }
        ],
        upperLimit: [
          { required: true, message: '标准值上限不能为空', trigger: 'blur' },
          { min: 1, max: 5, message: '长度在 1 到 5 个字符', trigger: 'blur' }
        ],
        lowerLimit: [
          { required: true, message: '标准值下限不能为空', trigger: 'blur' },
          { min: 1, max: 5, message: '长度在 1 到 5 个字符', trigger: 'blur' }
        ],

      }
    }
  },
  methods:{
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done();
        })
        .catch(_ => {});
    },
    reset(){
      this.searchModel.name = ''
      this.searchModel.project = ''
      this.searchModel.type = ''
      this.getMateriallist()
    },
    saveList(){
      //触发表单验证
      this.$refs.materialFromRef.validate((valid) => {
        if (valid) {
          //提交请求给后台
          materialApi.saveList(this.materialForm).then(response =>{
            //成功提示
            this.$message({
              message:response.message,
              type:'success'
            });
            //关闭对话框
            this.dialogFormVisible = false;
            //刷新表格
            this.getMateriallist();
          })
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    clearForm(){
      //清理表单
      this.materialForm = {};
      this.$refs.materialFromRef.clearValidate();//清除校验结果
    },
    openEditUI(id){
      //打开编辑界面
      if (id == null){
        this.title='添加质检标准';
      }else{
        this.title='修改质检标准';
        //根据id查询数据
        materialApi.getMaterialById(id).then(response =>{
          this.materialForm = response.data;
        })
      }
      this.dialogFormVisible=true;
    },
    handleSizeChange(pageSize){
      this.searchModel.pageSize = pageSize;
      this.getMateriallist();
    },
    handleCurrentChange(pageNum){
      this.searchModel.pageNum = pageNum;
      this.getMateriallist();
    },
    getMateriallist() {
      const info = {
        pageNum: this.searchModel.pageNum,
        pageSize: this.searchModel.pageSize,
        name: this.searchModel.name,
        project: this.searchModel.project,
        type: this.searchModel.type,
      }
      materialApi.getMateriallist(info).then(response => {
        this.materialList = response.data.records;
        this.total = response.data.total;
      });
    },
    delStandardById(material){
      this.$confirm(`您确认删除标准${material.name}?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        materialApi.delStandardById(material.id).then(response =>{
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
          this.getMateriallist();

        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    }
  },
  created() {
    this.getMateriallist();
  }
}
</script>

<style scoped>
#search .el-input {
  width: 200px;
  margin-right: 10px;
}
.el-dialog .el-input{
  width: 80%;
}
</style>
